<template>
  <div class="createPost-container">
    <el-form label-width="10px" class="form-container" :model="postForm" :rules="rules" ref="postForm">
      <div class="createPost-main-container">
        <el-row>
          <el-col>
            <div class="postInfo-container">
              <el-row>
                <el-col :span="12">
                  <el-form-item prop="deviceName">
                    <MDinput name="deviceName" title="设备名称" v-model="postForm.deviceName" required :maxlength="16">
                      设备名称
                    </MDinput>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item prop="containerType">
                    <MDinput name="containerType" title="容器类别" v-model="postForm.containerType" required :maxlength="16">
                      容器类别
                    </MDinput>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item prop="deviceCode">
                    <MDinput name="deviceCode" title="设备代码" v-model="postForm.deviceCode" required :maxlength="16">
                      设备代码
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="registerCode">
                    <MDinput name="registerCode" title="使用登记证编号" v-model="postForm.registerCode" required :maxlength="16">
                      使用登记证编号
                    </MDinput>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item prop="unitCode">
                    <MDinput name="unitCode" title="单位内编号" v-model="postForm.unitCode" required :maxlength="16">
                      单位内编号
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="makeUnit">
                    <MDinput name="makeUnit" title="制造单位" v-model="postForm.makeUnit" required :maxlength="16">
                      制造单位
                    </MDinput>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item prop="installUnit">
                    <MDinput name="installUnit" title="安装单位" v-model="postForm.installUnit" required :maxlength="16">
                      安装单位
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="useUnit">
                    <MDinput name="useUnit" title="使用单位" v-model="postForm.useUnit" required :maxlength="16">
                      使用单位
                    </MDinput>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item prop="useUnitAdress">
                    <MDinput name="useUnitAdress" title="使用单位地址" v-model="postForm.useUnitAdress" required :maxlength="16">
                      使用单位地址
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="usePosition">
                    <MDinput name="usePosition" title="设备使用地点" v-model="postForm.usePosition" required :maxlength="16">
                      设备使用地点
                    </MDinput>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item prop="useUnitCode">
                    <MDinput name="useUnitCode" title="使用单位组织机构代码" v-model="postForm.useUnitCode" required :maxlength="16">
                      使用单位组织机构代码
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="safeManager">
                    <MDinput name="safeManager" title="安全管理人员" v-model="postForm.safeManager" required :maxlength="16">
                      安全管理人员
                    </MDinput>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item prop="telephone">
                    <MDinput name="telephone" title="联系电话" v-model="postForm.telephone" required :maxlength="16">
                      联系电话
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="useLife">
                    <MDinput name="useLife" title="设计使用年限" v-model="postForm.useLife" required :maxlength="16">
                      设计使用年限
                    </MDinput>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item prop="useDate">
                    <MDinput name="useDate" title="使用投入日期" v-model="postForm.useDate" required :maxlength="16">
                      使用投入日期
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="subjectStructureForm">
                    <MDinput name="subjectStructureForm" title="主体机构形式" v-model="postForm.subjectStructureForm" required :maxlength="16">
                      主体机构形式
                    </MDinput>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="12">
                  <el-form-item prop="state">
                    <MDinput name="state" title="运行状态" v-model="postForm.state" required :maxlength="16">
                      运行状态
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="volume">
                    <MDinput name="volume" title="容积" v-model="postForm.volume" required :maxlength="16">
                      容积
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="internalDiameter">
                    <MDinput name="internalDiameter" title="内径" v-model="postForm.internalDiameter" required :maxlength="16">
                      内径
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="designPressure">
                    <MDinput name="designPressure" title="设计压力" v-model="postForm.designPressure" required :maxlength="16">
                      设计压力
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="designTemperature">
                    <MDinput name="designTemperature" title="设计温度" v-model="postForm.designTemperature" required :maxlength="16">
                      设计温度
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="usePressure">
                    <MDinput name="usePressure" title="使用压力" v-model="postForm.usePressure" required :maxlength="16">
                      使用压力
                    </MDinput>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item prop="useTemperature">
                    <MDinput name="useTemperature" title="使用温度" v-model="postForm.useTemperature" required :maxlength="16">
                      设计温度
                    </MDinput>
                  </el-form-item>
                </el-col>

              </el-row>
            </div>
          </el-col>
          <el-col :span="12" :offset="12">
            <el-button type="primary" v-loading="loading" @click="submitForm">保存</el-button>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
  import MDinput from '@/components/MDinput'
  import Multiselect from 'vue-multiselect' // 使用的一个多选框组件，element-ui的select不能满足所有需求
  import 'vue-multiselect/dist/vue-multiselect.min.css' // 多选框组件css
  import { req } from '@/api/base/BaseApi'
  const defaultForm = {
    deviceName: undefined,
    containerType: undefined,
    deviceCode: undefined,
    registerCode: undefined,
    unitCode: undefined,
    makeUnit: undefined,
    installUnit: undefined,
    useUnit: undefined,
    useUnitAdress: undefined,
    usePosition: undefined,
    useUnitCode: undefined,
    safeManager: undefined,
    telephone: undefined,
    useLife: undefined,
    useDate: undefined,
    subjectStructureForm: undefined,
    state: undefined,
    volume: undefined,
    internalDiameter: undefined,
    designPressure: undefined,
    designTemperature: undefined,
    usePressure: undefined,
    useTemperature: undefined
  }
  export default {
    name: 'detail',
    components: { MDinput, Multiselect },
    props: {
      isEdit: {
        type: Boolean,
        default: false
      },
      formTitle: {
        type: String,
        default: '新建'
      }
    },
    data() {
      const validateRequire = (rule, value, callback) => {
        if (!value || value.length === 0) {
          callback(new Error('必填'))
        } else {
          callback()
        }
      }
      return {
        module: 'productBaseInfo',
        postForm: Object.assign({}, defaultForm),
        loading: false,
        userTypes: [],
        menus: [],
        menuProps: {
          children: 'children',
          label: 'name'
        },
        rules: {
          name: [{ validator: validateRequire }],
          userType: [{ validator: validateRequire }]
        }
      }
    },
    created() {
      if (this.isEdit) {
        this.getData()
      }
    },
    methods: {
      save() {
        console.log('save')
        req('/api/sys/auth/productBaseInfo/create', 'get', this.postForm).then(res => {
          let type = 'success'
          if (res.code !== 200) {
            type = 'error'
          } else {
            // this.reset()
          }
          this.$notify({
            title: '提示!',
            message: res.message,
            type,
            duration: 2000
          })
        })
      },
      submitForm() {
        console.log('submitForm')
        this.$refs.postForm.validate(valid => {
          if (valid) {
            this.loading = true
            // console.log(this.$refs.postForm)
            // this.postForm.resources = this.$refs.tree.getCheckedKeys()
            // this.postForm.resources.forEach((value, index, arr) => {
            //   if (typeof value === 'object') {
            //     arr.slice(value, index)
            //   } else if (typeof value === 'string') {
            //     arr[index] = { id: value }
            //   } else if (typeof value === 'number') {
            //     arr[index] = { id: value }
            //   }
            // })
            if (this.isEdit) {
              this.update()
            } else {
              this.save()
            }
            this.loading = false
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }, // end submit
      update() {
        console.log('update')
        console.log(this.postForm.name)
        req('/api/sys/auth/productBaseInfo/update', 'get', this.postForm).then(res => {
          let type = 'success'
          if (res.code !== 200) {
            type = 'error'
          }
          this.$notify({
            title: '提示!',
            message: res.message,
            type,
            duration: 2000
          })
        })
      },
      getData() {
        console.log(this.$route.query.deviceCode)
        req('/api/sys/auth/productBaseInfo/deviceCode/' + this.$route.query.deviceCode, 'GET').then(response => {
          this.postForm = response.data[0]
          console.log('postForm')
          console.log(this.postForm)
        }).catch(() => console.log('page request error'))
      }
    }
  }
</script>

<style scoped>

</style>
